<template>
    <el-menu
    :default-active="activeRoute"
    mode="horizontal"
    @select="handleSelect"
  >
    <!-- <el-sub-menu index="Show" class="hello">
      <template #title>地面实验环境</template>
      <el-menu-item index="Show">
        <router-link to="/experiment/show">数据</router-link>
      </el-menu-item>
      <el-menu-item index="Search">
        <router-link to="/experiment/search">查询</router-link>
      </el-menu-item>
    </el-sub-menu>     -->
    <el-sub-menu index="Upair">
      <template #title>        
          <el-icon><StarFilled /></el-icon>星上载荷
      </template>
      <el-menu-item index="Upair">
        <router-link to="/upair/index">星上载荷</router-link>
      </el-menu-item>
      <el-menu-item index="Define">
        <router-link to="/upair/define-tm">自定义遥测集</router-link>
      </el-menu-item>
    </el-sub-menu> 
    <el-sub-menu index="SearchTm">
      <template #title>
        <el-icon><Search /></el-icon>历史查询        
      </template>
      <el-menu-item index="SearchTc">
        <router-link to="/search/tc">遥控查询</router-link>
      </el-menu-item>
      <el-menu-item index="SearchTm">
        <router-link to="/search/tm">遥测查询</router-link>
      </el-menu-item>
    </el-sub-menu>  
  </el-menu>
</template>

<script setup>
import { computed, ref } from 'vue'
import router from "@/router"
import { useRoute } from 'vue-router';

const route = useRoute()
const activeRoute = computed(() => {
  return route.name
})
function handleSelect(index) {
  // router.push({path: index})
}
</script>

<style scoped>

</style>